import { useEffect } from "react";
import { useDashboardStore } from "@/store/price";
import Maycard from "@/components/may-card";
import Maylist from "@/components/my-list/indx";

const chunkArray = (array: any[], chunkSize: number) => {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
};

const GridLayout = () => {
  const { groupedData } = useDashboardStore();


  return (
    <div>
      <div className="text-5 mb-3 mt-2 flex items-center">
        <div className="w-[6px] h-[20px] bg-[#236BFF] mr-2 ml-2.5"></div>
        <span className="font-bold">当日监控工作情况</span>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {groupedData.map((group, idx) => (
          <div key={idx} className={idx === 0 ? "row-span-2" : ""}>
            <Maycard image={group.icon} header={group.groupName}>
              {chunkArray(group.items, 3).map((chunk, chunkIdx) => (
                <Maylist
                  key={chunkIdx}
                  data={chunk.map((i) => ({
                    name: i.name,
                    value: i.value,
                    url: i.url,
                  }))}
                />
              ))}
            </Maycard>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GridLayout;
